<template>
    <view class="bg-[#f8f8f8] min-h-screen">
        <view class="flex items-center mx-[48rpx] py-2 my-[25rpx]">
            <text>班级：</text>
            <view class="flex items-center justify-between flex-1 border-b border-[#979797] pl-[20rpx] py-2">书法一班<u-icon
                    name="arrow-down" color="#444444" size="20"></u-icon></view>
        </view>
        <view class=" bg-white">
            <view class="flex text-[34rpx] relative">
                <view class="text-[#FD755D] bg-white w-1/2 h-[86rpx]  flex justify-center items-center">已打卡</view>
                <view class="bg-[#EFEFEF] w-1/2  h-[86rpx]  flex justify-center items-center">未打卡</view>
                <view class="ydk-triangle-up absolute left-[50%] translate-x-[-50%]"></view>
            </view>
            <view class="mx-[50rpx]">
                <view @click="navigateTo('/pages/activityRecordDetails/activityRecordDetails')" class="h-[100rpx] flex items-center mx-[20rpx] border-b border-[#EFEFEF]">
                    <view >张三</view>

                    <view class=" ml-[15rpx]">13977886543</view>
                    <view class="ml-auto flex items-center">
                        <text class="mr-1">详情</text>
                        <up-icon name="arrow-right" color="#444444" size="18"></up-icon>
                    </view>
                </view>
                <view @click="navigateTo('')" class="h-[100rpx] flex items-center mx-[20rpx] border-b border-[#EFEFEF]">
                    <view >李四</view>

                    <view class=" ml-[15rpx]">13977886543</view>
                    <view class="ml-auto flex items-center">
                        <text class="mr-1">详情</text>
                        <up-icon name="arrow-right" color="#444444" size="18"></up-icon>
                    </view>
                </view>
                <view @click="navigateTo('')" class="h-[100rpx] flex items-center mx-[20rpx] border-b border-[#EFEFEF]">
                    <view >王五</view>

                    <view class=" ml-[15rpx]">13977886543</view>
                    <view class="ml-auto flex items-center">
                        <text class="mr-1">详情</text>
                        <up-icon name="arrow-right" color="#444444" size="18"></up-icon>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>
<script setup>
const navigateTo = (url) => {
  uni.navigateTo({
    url
  })
}
</script>
<style scoped>
.ydk-triangle-up {
    width: 0;
    height: 0;
    border-left: 43rpx solid transparent;
    border-right: 43rpx solid transparent;
    border-bottom: 86rpx solid #fff;
}

.wdk-triangle-up {
    width: 0;
    height: 0;
    border-left: 43rpx solid transparent;
    border-right: 43rpx solid transparent;
    border-bottom: 86rpx solid #fff;
}
</style>